import React, { useState } from 'react';

import './index.less';
import Touch from '@c/touch/Touch.tsx';

export default function Tobbar(props: any) {
  const [titleActive, setTitleActive] = useState('推荐');
  // 点击切换查看内容
  const toggleContent = (title: string) => {
    setTitleActive(title);
  };

  const { className } = props;
  return (
    <div className={`${className}  tabbar`}>
      <div>直播</div>
      <nav className="middle fx">
        <Touch className={`item ${titleActive === '杭州' ? 'active' : ''}`} onClick={() => toggleContent('杭州')}>
          杭州
        </Touch>
        <Touch className={`item ${titleActive === '关注' ? 'active' : ''}`} onClick={() => toggleContent('关注')}>
          关注
        </Touch>
        <Touch className={`item ${titleActive === '推荐' ? 'active' : ''}`} onClick={() => toggleContent('推荐')}>
          推荐
        </Touch>
      </nav>
      <div className="iconsousuo iconfont"></div>
    </div>
  );
}
